// 颜色 ********************************************
$white: #fff; //白色
$black: #000; //黑色
$text: #333; //文本
$primary: #3f61f1; //主色
$primaryBg: linear-gradient(45deg, #5d7cfd 0, #3f61f1 100%); //渐变
$success: #67c23a; //正确
$warning: #f0ad4e; //警告
$error: #e13335; //错误
$violet: #9f1bd3; //紫色
$disable: #c0c0c0; //禁用
$border: #e6e6e6; //边框
$border1: #dcdfe6; //边框
$grey: #999aaa; //提示文本
$bg: #eceff6;
$lightgrey: #eceff7;
$placeholder: #d9d9d9;
$hover: #f2f5fc;

// 遮罩颜色
$mask: rgba(#000000, 0.5);
$whiteMask: rgba(#ffffff, 0.2);
$blackMask: rgba(#333, 0.06);



// 颜色映射表
$colors: (
  'white': $white,
  'black': $black,
  'primary': $primary,
  'success': $success,
  'warning': $warning,
  'error': $error,
  'disable': $disable,
  'border': $border,
  'bg': $bg,
  'grey': $grey,
  'text': $grey,
  'lightgrey': $lightgrey,
  'placeholder': $placeholder,
  'hover': $hover,
  'mask': $mask,
  'blackMask': $blackMask,
  'violet': $violet,
);

// 自动生成 class
@each $key, $value in $colors {
  .text-color-#{$key} {
    color: $value !important;
  }
  .bg-color-#{$key} {
    background-color: $value !important;
  }
  .border-color-#{$key} {
    border: 1px solid $value !important;
  }
}